<template>
  <div class="part-time-job">
    <!-- 头部筛选和标题 -->
    <div class="part-time-top">
      <div><i></i><span>兼职就业情况</span></div>
      <div class="select-wrapper">
        <div class="top-select-item">
          <single-list-filter-without-cb ref="refJobRegion"
                                         @confirmSingleSelect="regionFun"></single-list-filter-without-cb>
        </div>
        <div class="top-select-item">
          <single-list-filter-without-cb ref="refJobType"
                                         @confirmSingleSelect="jobTypeFun"></single-list-filter-without-cb>
        </div>
      </div>
    </div>
    <ul class="top-title-info">
      <li>
        <h4>注册企业数</h4>
        <h3>85</h3>
        <h6>家</h6>
      </li>
      <li>
        <h4>当前招聘企业数</h4>
        <h3>12</h3>
        <h6>家</h6>
      </li>
      <li>
        <h4>当前发布岗位数</h4>
        <h3>24</h3>
        <h6>个</h6>
      </li>
      <li>
        <h4>注册人数</h4>
        <h3>1130</h3>
        <h6>人</h6>
      </li>
      <li>
        <h4>求职人数</h4>
        <h3>32</h3>
        <h6>人</h6>
      </li>
    </ul>
    <div class="table-wrapper">
      <div class="left-table">
        <div class="four-chart-mini-title ">
          <p><span>兼职岗位列表</span></p>
        </div>
        <!-- 表格 -->
        <div class="table-content">
          <el-table
            :data="jobTableInfo"
            height="300"
            @row-click="jobClickFun"
            style="width: 100%">
            <el-table-column
              prop="companyName"
              label="公司名称"
              :show-overflow-tooltip="true"
             >
            </el-table-column>
            <el-table-column
              prop="partTimeName"
              label="兼职名称"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="tel"
              label="联系方式"
             >
            </el-table-column>
            <el-table-column
              prop="workArea"
              :show-overflow-tooltip="true"
              label="工作地区">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="line"></div>
      <div class="right-table">
        <div class="four-chart-mini-title ">
          <p><span>求职人员列表</span></p>
        </div>
        <!-- 表格 -->
        <div class="table-content">
          <el-table
            :data="userTableInfo"
            @row-click="userClickFun"
            height="300"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="姓名"
              >
            </el-table-column>
            <el-table-column
              prop="intension"
              label="求职意向"
              :show-overflow-tooltip="true"
              >
            </el-table-column>
            <el-table-column
              prop="tel"
              label="联系方式">
            </el-table-column>
            <el-table-column
              prop="workplace"
              :show-overflow-tooltip="true"
              label="工作地区">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <p style="font-size: 10px;color:#8395ad;opacity: 0.5; text-align: center;padding:10px 0 18px;">数据来源于芸兼职App</p>
    <!--弹窗-->
    <dap-popover ref="refInfoPopover" :titleText="popoverTitle" :hideBtn="true">
      <ul v-if="popoverTitle=='个人简历'" class="user-info-wrapper">
        <li>
          <span>姓名：</span>
          <span>{{popInfo.name}}</span>
        </li>
        <li>
          <span>性别：</span>
          <span>{{popInfo.gender}}</span>
        </li>
        <li>
          <span>联系方式：</span>
          <span>{{popInfo.tel}}</span>
        </li>
        <li>
          <span>城市：</span>
          <span>{{popInfo.city}}</span>
        </li>
        <li>
          <span>地区：</span>
          <span>{{popInfo.districts}}</span>
        </li>

        <li>
          <span>院校：</span>
          <span>{{popInfo.university}}</span>
        </li>
        <li>
          <span>求职意向：</span>
          <span>{{popInfo.intension}}</span>
        </li>
        <li>
          <span>补助要求：</span>
          <span>{{popInfo.subsidy}}</span>
        </li>
        <li>
          <span>结算方式：</span>
          <span>{{popInfo.payType}}</span>
        </li>
        <li>
          <span>工资要求：</span>
          <span>{{popInfo.salary }}</span>
        </li>
        <li>
          <span>工作地点：</span>
          <span>{{popInfo.workplace }}</span>
        </li>
      </ul>
      <ul v-else class="user-info-wrapper">
        <li>
          <span>公司名称：</span>
          <span>{{popInfo.companyName}}</span>
        </li>
        <li>
          <span>联系人：</span>
          <span>{{popInfo.contact}}</span>
        </li>
        <li>
          <span>联系电话：</span>
          <span>{{popInfo.postContactNumber}}</span>
        </li>
        <li>
          <span>工作地点：</span>
          <span>{{popInfo.workPlace}}</span>
        </li>
        <li>
          <span>工作地区：</span>
          <span>{{popInfo.workArea}}</span>
        </li>

        <li>
          <span>兼职名称：</span>
          <span>{{popInfo.partTimeName}}</span>
        </li>
        <li>
          <span>兼职分类：</span>
          <span>{{popInfo.partTimeClassification}}</span>
        </li>
        <li>
          <span>岗位说明：</span>
          <span>{{popInfo.jobDescription}}</span>
        </li>
        <li>
          <span>结算方式：</span>
          <span>{{popInfo.settlementMethod}}</span>
        </li>
        <li>
          <span>工资：</span>
          <span>{{popInfo.wage }}</span>
        </li>
        <li>
          <span>男女要求：</span>
          <span>{{popInfo.maleFemaleRequirements }}</span>
        </li>
        <li>
          <span>工作地点：</span>
          <span>{{popInfo.workPlace }}</span>
        </li>
        <li>
          <span>工作地区：</span>
          <span>{{popInfo.workArea }}</span>
        </li>
        <li>
          <span>详细地址：</span>
          <span>{{popInfo.address }}</span>
        </li>
      </ul>
    </dap-popover>
  </div>
</template>

<script>
  // 下拉框
  import SingleListFilterWithoutCb from "../../last/filter/single-list-filter-without-checkbox";
  import dapPopover from '../../view/dap-popover.vue';
   import jobTableInfo from "./jobJson";
  import userTableInfo from "./userJson";
  export default {
    name: "part-time-job",
    components: {
      SingleListFilterWithoutCb,
      dapPopover
    },
    data() {
      return {
        popoverTitle:'',
        regionItem:'',
        jobTypeItem: '',
        region: [],
        jobType: [],
        jobTableInfo: [],
        userTableInfo:[],
        popInfo:'',
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.jobTableInfo=jobTableInfo;
        this.userTableInfo=userTableInfo;
        this.region.push({ selectId: "", selectName: "工作地区" });
        let regionArr = ["市辖区", "金明区", "龙亭区", "禹王台区"];
        regionArr.forEach((item) => {
          this.region.push({ selectId: item, selectName: item });
        });
        this.$refs.refJobRegion.setSingleListData(this.region);

        this.jobType.push({ selectId: "", selectName: "兼职分类" });
        let jobTypeArr = ["服务员", "客服", "临时工", "送餐员", "推广员"];
        jobTypeArr.forEach((item) => {
          this.jobType.push({ selectId: item, selectName: item });
        });
        this.$refs.refJobType.setSingleListData(this.jobType);
      },
      regionFun(item){
        this.regionItem=item;
        this.selectFun()
      },
      jobTypeFun(item){
        this.jobTypeItem=item;
        this.selectFun()
      },
      selectFun() {
        if(!(this.jobTypeItem||this.regionItem)){
          this.jobTableInfo=jobTableInfo;
          this.userTableInfo=userTableInfo;
          return;
        }
        this.jobTableInfo=[];
        this.userTableInfo=[];
        jobTableInfo.filter((job)=>{
          if((job['workArea'].indexOf(this.regionItem)>=0) && (job['partTimeClassification'].indexOf(this.jobTypeItem)>=0)){
            this.jobTableInfo.push(job)
          }
        })
        userTableInfo.filter((user)=>{
          if((user['workplace'].indexOf(this.regionItem)>=0) && (user['intension'].indexOf(this.jobTypeItem)>=0)){
            this.userTableInfo.push(user)
          }
        })
      },
      userClickFun(row){
        this.popoverTitle="个人简历";
        this.$refs.refInfoPopover.show();
        this.popInfo=row;
      },
      jobClickFun(row){
        this.popoverTitle="岗位信息";
        this.$refs.refInfoPopover.show();
        this.popInfo=row;
      }
    }
  };
</script>

<style scoped>
  @import '../../../assets/css/authority.css';
  .user-info-wrapper{
    min-width:400px;
    padding:10px 15px;
  }
  .user-info-wrapper li{
    line-height: 1.8em;
    font-size: 12px;
    display: flex;
  }
  .user-info-wrapper li span{
    display: inline-block;
    max-width:300px;
  }
  .user-info-wrapper li span:first-child{
    width:100px;
    heihgt:100%;
    text-align: right;
  }
  .part-time-job {
    color: #fff;
    font-size: 0;
  }

  .part-time-job .part-time-top > div {
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    font-size: 14px;
    padding: 10px 5px;
  }

  .part-time-job .part-time-top > div > i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #018DDE;
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
  }

  .part-time-job .select-wrapper {
    text-align: right;
  }

  .part-time-job .select-wrapper .top-select-item {
    display: inline-block;
    font-size: 12px;
  }

  /*中间信息*/
  .top-title-info {
    display: flex;
    justify-content: center;
    font-size: 14px;
    margin: 25px 0;
  }

  .top-title-info li {
    margin-right: 5%;
  }

  .top-title-info h3 {
    text-align: center;
    font-size: 26px;
    padding: 10px 0;
  }

  .top-title-info h4 {
    text-align: center;
    font-size: 16px;
    color: #67ffdb;
  }

  .top-title-info h6 {
    text-align: center;
    font-size: 12px;
    color: #8395ad;
  }

  /*表格*/
  .part-time-job .table-wrapper{
    overflow: hidden;
  }

  .part-time-job .table-wrapper > div {
    width: 48%;
    float: left;
    font-size: 12px;
  }
  .part-time-job .table-wrapper .line {
    width:4%;
    height:330px;
    margin-top:40px;
    text-align: center;
  }
  .part-time-job .table-wrapper .line:after{
    content: "";
    display: inline-block;
    width:1px;
    height: 100%;
    background-color:#1d2027;
  }
  .part-time-job .four-chart-mini-title {
    height: 32px;
    line-height: 32px;
    min-width: 100px;
    margin-top: 10px;
    margin-left: 40px;
  }

  .part-time-job .four-chart-mini-title p {
    height: 28px;
    line-height: 28px;
    display: inline-block;
    color: #fff;
    min-width: 50px;
    padding-right: 25px;
    background: url('../../../assets/img/title-bk.png') no-repeat right center;
  }

  .part-time-job .four-chart-mini-title p span {
    background-color: #2e4a74;
    display: block;
    padding-left: 10px;
  }


  .part-time-job .table-content {
    margin: 20px 0 20px 40px;
  }

  .part-time-job .right-table .table-content {
    margin-left: 0;
    margin-right: 2%;
  }
  .part-time-job .right-table .four-chart-mini-title{margin-left: 0px;}

</style>

<style>
  .part-time-job table{
    text-align: center;
  }
  .part-time-job .el-table th{
    text-align: center;
  }
  .part-time-job .el-table td{
    cursor: pointer;
    border-bottom: none !important;
  }
  .part-time-job .el-table__header{
    background: none;
    box-shadow: none;
  }
  .part-time-job .el-table th>.cell{
    color:rgba(108,213,244,0.5);
  }
  .part-time-job .el-table tr, .el-table, .el-table__expanded-cell{
    color:#6cd5f4 !important;
  }
  .part-time-job  .el-table__row:hover > td{
    background-color: rgba(108,213,244,0.2) !important;
  }


  .part-time-job .table-wrapper .el-table ::-webkit-scrollbar{
    display: none;
  }
  .part-time-job .table-wrapper .el-table:hover ::-webkit-scrollbar{
    display: block;
  }
  .part-time-job .table-wrapper .el-table ::-webkit-scrollbar-track-piece{
    background-color:#2c3f5d;
  }
  .part-time-job .table-wrapper .el-table ::-webkit-scrollbar-thumb{
    background-color:#334b6b;
  }
</style>
